<template>
  <view class="classify-grid">
    <view
      v-for="(item, index) in attribute.list"
      :key="index"
      class="classify-grid-item"
    >
      <view>{{ item.text }}</view>
      <u-grid :border="false" :col="attribute.col">
        <u-grid-item
          v-for="(listItem, listIndex) in item.list"
          :key="listIndex"
          @click="handleNavigate(listItem)"
        >
          <view
            class="grid-item"
            :id="listItem.guide_option.id"
            :data-guide-text="listItem.guide_option.dataGuideText"
          >
            <image
              v-if="listItem.imageUrl"
              :src="listItem.imageUrl"
              :style="{ 'border-radius': '10rpx' }"
              class="gird-image"
              :class="[`gird-${attribute.type}-image`]"
            />
            <view
              v-else
              class="empty-area"
              :style="{ 'border-radius': '10rpx' }"
              :class="[`gird-${attribute.type}-image`]"
            />

            <view
              class="grid-text"
              v-if="attribute.type === GIRD_TYPE.IMAGE_AND_TEXT"
              >{{ listItem.text }}</view
            >
          </view>
        </u-grid-item>
      </u-grid>
    </view>
  </view>
</template>

<script>
import { callNavigateHook } from "@/utils/tool";
const GIRD_TYPE = {
  //imageAndText-图文布局，image-单图片布局
  IMAGE_AND_TEXT: "imageAndText",
  IMAGE: "image",
};
export default {
  name: `classify-gird`,
  props: {
    attribute: {
      type: Object,
      default: () => ({
        list: [],
        col: 4,
      }),
    },
  },
  data() {
    return {
      GIRD_TYPE,
      customerStyle: {
        borderRadius: 0,
      },
    };
  },
  methods: {
    handleNavigate(listItem) {
      if (listItem.navigateType) {
        callNavigateHook({
          type: listItem.navigateType,
          target: listItem,
        });
      } else {
        this.$emit("event", {
          eventName: "girdClick",
          attribute: listItem,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.classify-grid {
  background-color: white;
  padding: 10rpx;
  width: 678rpx;
  margin: 20rpx auto;
  &-item {
    margin-bottom: 20rpx;
  }
  .grid-item {
    padding: 10rpx 0;
    text-align: center;
    width: 100%;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-direction: column;
    box-sizing: border-box;
    display: flex;
    float: left;
  }
  .grid-text {
    box-sizing: border-box;
    padding-top: 8rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #555555;
  }

  .gird-imageAndText-image {
    width: 50rpx;
    height: 50rpx;
  }

  .empty-area {
    background-color: #f3f4f6;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    color: #333;
  }

  .gird-image-image {
    width: 80rpx;
    height: 80rpx;
  }
}
</style>
